<template>
  <div style="padding: 0px 0px 0px 0px;height: 100%;">
    <!-- :stretch="true"  选项卡平铺 -->
    <el-tabs v-model="nurseActive" class="parent-tab" style="height: 100%; padding: 0 5px 0 5px" @tab-remove="removeTab"
             @tab-click="tabClick">
      <el-tab-pane label="患者床位列表" name="0" style="height: 100%;overflow-y: auto;">
        <template #label><span
          style="color: #4E64F6;font-weight: bold;font-size: 19px;margin-left: 10px">患者床位列表</span></template>
        <nurse-card-list ref="nurseCardListRef" @card-dbl-click="cardDblClick"
                         @select-order-status-in-count-fun="selectOrderStatusInCountFun"/>
      </el-tab-pane>
      <el-tab-pane v-for="item in patientTabs" :key="item.name" :label="item.title" :name="item.name" closable
                   style="height: 100%;overflow-y: auto;">
        <patient-info-index :patient-id="patientInfo.patientId" :visit-id="patientInfo.visitId"/>
      </el-tab-pane>
    </el-tabs>
    <!-- 底部菜单 -->
    <el-card
      class="bottom-card"
      style="position: absolute;  bottom: 0;width:100%;height: 30px; padding: -1px 10px 0 10px !important; ">
            <span class="mr10">
                <el-dropdown placement="top-start">
                    <el-button type="primary">
                        <template #icon>
                            <i-ep-arrowUpBold/>
                        </template>医嘱信息</el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="bottomMenuClick('one')">转抄医嘱查看</el-dropdown-item>
                            <el-dropdown-item @click="bottomMenuClick('two')">新开医嘱查看</el-dropdown-item>
                            <el-dropdown-item @click="bottomMenuClick('three')">处方查看</el-dropdown-item>
                            <el-dropdown-item @click="bottomMenuClick('four')">检查单查看</el-dropdown-item>
                            <el-dropdown-item @click="bottomMenuClick('five')">检验单查看</el-dropdown-item>
                            <el-dropdown-item @click="bottomMenuClick('six')">出院通知单</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </span>
      <span class="mr10">
                <el-dropdown placement="top-start">
                    <el-button type="success">
                         <template #icon>
                            <i-ep-arrowUpBold/>
                        </template>摆药信息</el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="bottomMenuClick('seven')">预摆药查询</el-dropdown-item>
                            <el-dropdown-item @click="bottomMenuClick('eight')">摆药单查询</el-dropdown-item>
                            <el-dropdown-item @click="bottomMenuClick('nine')">生成补摆药单</el-dropdown-item>
                            <el-dropdown-item @click="bottomMenuClick('ten')">补摆药单查询</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </span>
      <span class="mr10">
                <el-dropdown placement="top-start">
                    <el-button type="warning">
                         <template #icon>
                            <i-ep-arrowUpBold/>
                        </template>综合查询</el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="bottomMenuClick('eleven')">在院病人列表</el-dropdown-item>
                            <el-dropdown-item @click="bottomMenuClick('twelve')">出院病人列表</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </span>
      <span class="mr10">
                <el-dropdown placement="top-start">
                    <el-button type="danger">
                         <template #icon>
                            <i-ep-arrowUpBold/>
                        </template>打印</el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                           <el-dropdown-item @click="bottomMenuClick('twenty')">医嘱打印</el-dropdown-item>
                           <el-dropdown-item @click="bottomMenuClick('thirteen')">分类执行单</el-dropdown-item>
                           <el-dropdown-item @click="bottomMenuClick('fourteen')">床头卡</el-dropdown-item>
                           <el-dropdown-item @click="bottomMenuClick('fifteen')">医嘱瓶签</el-dropdown-item>
                           <el-dropdown-item @click="bottomMenuClick('sixteen')">一日清单</el-dropdown-item>
                           <el-dropdown-item @click="bottomMenuClick('seventeen')">催补预交金</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </span>
      <span class="mr10">
                <el-dropdown placement="top-start">
                    <el-button type="primary">
                         <template #icon>
                            <i-ep-arrowUpBold/>
                        </template>费用</el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="bottomMenuClick('eighteen')">费用补录</el-dropdown-item>
                            <el-dropdown-item @click="bottomMenuClick('nineteen')">费用模板维护</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </span>
    </el-card>
    <el-dialog
      v-model="dialogVisible"
      title="医嘱转抄"
      width="80%"
      @close="handleClose"
    >
      <template #default>
        <order-status-two-orders ref="ordersStatusTwoOrdersRef" :order-status="'2'" @select-ok="handleClose"/>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import nurseCardList from './patientBedRecCard.vue';
import patientInfoIndex from './business/nursePatientIndex.vue'
import {selectOrderStatusInCount} from "@/api/orders/orders.ts"
import {useUserStoreHook} from "@/store/modules/user.ts";
import orderStatusTwoOrders from "@/views/nurse/business/orderStatusTwoOrders.vue"

const useUserStore = useUserStoreHook();
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo;
const {proxy} = getCurrentInstance() as any;
const currentSelectDept = ref<string>(proxy.$currentSelectDept)
const nurseActive = ref('0')
const dialogVisible = ref<boolean>(false)
// 医嘱状态数量
const ordersStatusCount = ref<number>(0)
const patientTabs = ref<any>([])
const nurseCardListRef = ref<any>()
const patientInfo = ref<any>({})
const ordersStatusTwoOrdersRef = ref()
const removeTab = (targetName: string) => {
  const tabs = patientTabs.value
  let activeName = nurseActive.value
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }
  nurseActive.value = activeName
  patientTabs.value = tabs.filter((tab) => tab.name !== targetName)
  if (patientTabs.value.length == 0) {
    nurseActive.value = "0"
  }
}

function cardDblClick(obj: any, index: number) {
  const newTabName = obj.hospitalNo + "|" + obj.name + "|" + obj.bedNo + "床"
  const tabIndex = patientTabs.value.findIndex((item: any) => {
    return obj.bedNo == item.name
  })
  if (tabIndex > -1) {
    nurseActive.value = obj.bedNo + ""
  } else {
    patientTabs.value.push({
      title: newTabName,
      name: obj.bedNo + ""
    })
    nurseActive.value = obj.bedNo + ""
  }
  patientInfo.value = obj
}

// 查询病区所有医嘱状态分类的总数
function selectOrderStatusInCountFun(currentSelectDeptThis:string) {
  currentSelectDept.value = currentSelectDeptThis
  const param = {
    orgId: userInfo.orgId,
    wardCode: currentSelectDept.value,
    orderStatus: '2'
  }
  selectOrderStatusInCount(param).then((res: resType) => {
    ordersStatusCount.value = res.data
    if (ordersStatusCount.value > 0) {
      ElMessageBox.confirm(`还有【${ordersStatusCount.value}】条【未转抄】的医嘱，是否处理？`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        dialogVisible.value = true
        ordersStatusTwoOrdersRef.value.getList()
      }).catch(() => {
      })
    }
  })
}

/**
 * 子页面底部菜单点击事件
 * @param type
 */
function bottomMenuClick(type: string) {
  nextTick(() => {
    nurseCardListRef.value.propsBottomMenuClick(type)
  })

}

/**
 * tab页点击事件
 * @param obj
 */
function tabClick(obj: any) {
  const objThis = toRaw(obj)
  if (objThis.props.name === '0') {
    const currentSelectDeptThis = currentSelectDept.value
    selectOrderStatusInCountFun(currentSelectDeptThis)
  }

}

// 关闭弹出框
function handleClose() {
  ordersStatusTwoOrdersRef.value.clearQueryParams()
  dialogVisible.value = false
}

// if (currentSelectDept.value) {
//     selectOrderStatusInCountFun()
// }
</script>

<style scoped>
:deep(.el-tabs) {
  overflow-y: auto;
}

:deep(.el-tabs__content) {
  height: calc(100% - 60px);
  overflow-y: auto;
}

:deep(.bottom-card > .el-card__body) {
  padding: 0 !important;
  margin: 3px 10px 3px 10px;
}

:deep(.el-tabs__item.is-active, .el-tabs__item:hover) {
  color: #ffffff;
  background-color: #68baed;
  border-radius: 8px 8px 0 0;
}
:deep(.el-tabs__item:last-child) {
  padding-right: 10px !important;
}
:deep(.el-tabs__item){
  color: #558eff;
  margin-right: 10px;
}

/* :deep(.app-container) {
   background-color: #ffffff;
}
*/

/* :deep(.parent-tab .el-tabs__item) {
    min-width: 160px;
    height: 30px;
    margin-right: -24px;
} */

/* :deep(.el-tabs__content) {
    height: calc(100% - 30px);
} */

/* :deep(.parent-tab .el-tabs__nav-scroll) {
    background-color: #ffffff;
}

:deep(.parent-tab .el-tabs__header) {
    margin: 0 0 0px;
    box-shadow: 0 0 18px 0 #878787;
} */
</style>
